<!-- 拖拽图片到指定区域并显示出此图片的内容。 -->

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .dropbox{
                width: 300px;
                height: 300px;
                margin: 20px;
                border: 3px dashed #e6e6e6;
            }
            .area{
                margin: 100px auto;
                width: 100px;
                height: 100px;
                background-repeat: no-repeat;
                background-image: url("");
            }
            
            #preview img{
                width: 100px;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <div id="dropbox" class="dropbox">
            <div class="area"></div>
        </div>
        <div id="preview"></div>
        
        <script type="text/javascript">
            var dropbox = document.getElementById("dropbox");
            var preview = document.getElementById("preview");
            
            dropbox.addEventListener("dragenter", function(e){
                e.stopPropagation();
                e.preventDefault();
            }, false);
            
            dropbox.addEventListener("dragover", function(e){
                e.stopPropagation();
                e.preventDefault();
            }, false);
            
            dropbox.addEventListener("drop", function(e){
                e.stopPropagation();
                e.preventDefault();
            
                var dt = e.dataTransfer;
                var files = dt.files;
                  
                for (var i = 0; i < files.length; i++) {
                  var file = files[i];
                  var imageType = /^image\//;

                  if ( !imageType.test(file.type) ) {
                      continue;
                   }
                    
                   // 填充选择的图片到展示区
                    var img = document.createElement("img");
                    img.classList.add("obj");
                    img.file = file;
                    preview.appendChild(img);
                    
                    // 读取File对象中的内容
                    var reader = new FileReader();
                    reader.onload = function(e) { 
                        img.src = e.target.result; 
                      }; 
                    reader.readAsDataURL(file);
                    
                    // 我们除了可以使用base64字符串作为内容的DataURI将一个文件嵌入到另外一个文档里，
                    // 还可以使用URL对象。URL对象用于生成指向File对象或Blob对象的URL。
                    //var objecturl =  window.URL.createObjectURL(file);
                    //img.src = objecturl; 
                    //img.onload = function(e) {
                    //    // 释放一个之前通过调用 window.URL.createObjectURL() 创建的已经存在的 URL 对象
                    //    // 在img.src = objecturl中已经使用了这个URL 对象，使用监听到img加载完毕后，就释放这个对象吧
                    //    window.URL.revokeObjectURL(this.src);
                    //}
                }
            }, false);
        </script>
    </body>
</html>